<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24" style="margin-top: 20px">
      <a-col :sm="24" :md="4" :xl="24">
        <a-card class="box1" style="height: 150px">
          <img
            v-if="infoData.userHeadUrl == null"
            style="width: 100px; height: 100px; border-radius: 15px; float: left"
            src="~@/assets/icon/u18916.png"
            alt=""
          />
          <img
            v-else
            style="width: 100px; height: 100px; border-radius: 15px; float: left"
            :src="'data:image/png;base64,' + infoData.userHeadUrl"
            alt=""
          />
          <div style="float: left">
            <div class="s s1">
              <span>{{ infoData.userName }}</span>
              <a-tag color="red" style="margin-left: 50px">{{ infoData.userSourceType }}</a-tag>
            </div>
            <div class="s s2">
              原文链接：<span>{{ infoData.userSourceUrl }}</span>
            </div>
            <div class="s s3">
              联系方式：<span>{{ infoData.userWechat }}</span
              ><span class="sp sp1">微信号</span> <span>{{ infoData.userTelephone }}</span>
              <span class="sp sp2">手机号</span> <span>{{ infoData.userQq }}</span> <span class="sp sp3">QQ号</span>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="24" style="margin-top: 20px">
      <a-col :sm="24" :md="4" :xl="24">
        <a-card class="box2">
          <div class="d1" style="text-align: center; padding-top: 17px">
            <p style="margin-bottom: 4px">走私金额总数（万）</p>
            <p style="font-size: 20px; font-weight: bold; margin-bottom: 7px">{{ infoData.totalAmount }}</p>
          </div>
          <div class="d1" style="margin-left: 2%">
            <div>
              <p style="margin-bottom: 4px">疑似走私发布数</p>
              <p style="font-size: 20px; font-weight: bold">{{ infoData.infoNum }}</p>
            </div>
            <img src="./img/s.png" alt="" />
          </div>
          <div class="d2">
            关键词
            <span class="sp1" v-if="infoData.userKeyword != undefined && infoData.userKeyword.length > 0">{{
              infoData.userKeyword.split(',').length
            }}</span>
            个
            <span class="sp2">{{ infoData.userKeyword }}</span>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="24" style="margin-top: 20px">
      <a-col :sm="24" :md="4" :xl="24">
        <a-card style="height: auto">
          <downLoadComponents
            ref="downLoadComponents"
            :formData="pageFilter"
            :apiUrl="downUrl"
            :fileText="fileText + '.xls'"
          >
            <a-button class="exportBtn" :disabled="pageData.records.length == 0" @click="onExport"> 导出数据 </a-button>
          </downLoadComponents>
          <!-- <a-button class="exportBtn" @click="onExport()">导出</a-button> -->
          <a-input-search
            allowClear
            class="searchBtn"
            v-model="pageFilter.searchContent"
            placeholder="请输入情报名称或情报ID"
            @search="onSearch"
          />
          <InfoList
            ref="infoListID"
            mType="rank"
            :pageData="pageData"
            :Keywords="[this.infoData.keyword]"
            @onRefreshTable="getData"
          />
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import InfoList from './components/infoList'
import * as informationApi from '@/api/information.js'
import downLoadComponents from '@/components/zxd/downLoad'
export default {
  name: 'detail',
  components: {
    InfoList,
    downLoadComponents,
  },
  data() {
    return {
      infoData: {},
      pageFilter: {
        pageNo: 1, // 当前页数
        pageSize: 10, // 每页显示几条数据
        userId: this.$route.query.id,
        searchContent: '',
      },
      pageData: {
        records: [],
      },
      fileText: '情报推送-导出',
      downUrl: 'smuggle/smuInfoRecord/exportXls',
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData(params) {
      if (params != undefined) {
        this.pageFilter.pageNo = params.currentPage
        this.pageFilter.pageSize = params.pageSize
      }
      informationApi
        .smuUserDetail(this.pageFilter)
        .then((res) => {
          if (res.success) {
            this.infoData = res.result.smuUser
            this.pageData = res.result.smuInfoRecordList
          }
        })
        .catch((e) => {
          // this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onSearch() {
      this.pageFilter.pageNo = 1
      this.getData()
    },
    onExport() {
      setTimeout(() => {
        this.pageFilter.idList = this.$refs.infoListID.selectKeys
        this.$refs.downLoadComponents.exportDowmPOST()
        this.$refs.infoListID.onClearRowKeys()
      }, 500)
    },
  },
}
</script>

<style lang="less" scoped>
/deep/ .ant-card-head-title {
  font-weight: bold;
}
.box1 {
  position: relative;
  img {
    width: 40px;
    height: 40px;
  }
  .s {
    padding-bottom: 10px;
  }
  .s1 {
    margin-left: 20px;
    font-size: 20px;
    font-weight: bold;
  }
  .s2 {
    margin-left: 20px;
    font-size: 16px;
    // font-weight: bold;
  }
  .s3 {
    margin-left: 20px;
    font-size: 16px;
    // font-weight: bold;
    span {
      margin-right: 10px;
    }
    .sp {
      padding: 2px 5px;
      margin-right: 20px;
    }
    .sp1 {
      border: 1px solid #f59a23;
      color: #f59a23;
    }
    .sp2 {
      border: 1px solid #02a7f0;
      color: #02a7f0;
    }
    .sp3 {
      border: 1px solid #ec808d;
      color: #ec808d;
    }
  }
}
.box2 {
  overflow: hidden;
  font-size: 16px;
  .d1 {
    position: relative;
    float: left;
    border: 1px solid #ccc;
    width: 23%;
    height: 83px;
    overflow: hidden;
    div {
      float: left;
      width: 70%;
      text-align: center;
      margin-top: 16px;
      height: 65px;
    }
    img {
      width: 50px;
      float: right;
      margin-top: 17px;
      margin-right: 30px;
    }
  }
  .d2 {
    float: left;
    margin-left: 2%;
    border: 1px solid #ccc;
    width: 48%;
    height: 82px;
    padding-top: 30px;
    padding-left: 22px;
    .sp1 {
      color: #02a7f0;
    }
    .sp2 {
      border-left: 1px solid #ccc;
      margin-left: 12px;
      padding-left: 20px;
    }
  }
  // img {

  //   position: absolute;
  //   right: 40px;
  //   top: 10px;
  // }
}
.textBox {
  .sp1 {
    margin-left: 20px;
    float: left;
  }
  // .sp1:nth-child(4n+1){
  //   margin-left: 0;
  // }
}
.wx {
  color: #f29821;
  .s1 {
    border-radius: 5px;
    border: 1px solid #f29821;
    padding: 3px 6px;
    margin-right: 20px;
  }
}
.sj {
  margin-top: 20px;
  color: #027db4;
  .s2 {
    border-radius: 5px;
    border: 1px solid #027db4;
    padding: 3px 6px;
    margin-right: 20px;
  }
}
.exportBtn {
  position: absolute;
  top: 36px;
  left: 95px;
  z-index: 1;
}
.searchBtn {
  position: absolute;
  top: 30px;
  right: 24px;
  width: 400px;
  z-index: 2;
}
/deep/.ant-timeline-item {
  left: 150px;
  .time {
    position: absolute;
    left: -160px;
  }
  .count {
    position: absolute;
    right: 400px;
    color: #f48093;
    border: 1px solid #f48093;
    padding: 2px 15px;
  }
  .type {
    position: absolute;
    right: 200px;
  }
  .ant-timeline-item-content {
    border-bottom: 1px dotted #ccc;
    padding-bottom: 20px;
  }
}
/deep/.ant-timeline-item-last > .ant-timeline-item-content {
  min-height: 0;
}

.carouselBox .ant-carousel .slick-slide {
  height: 250px;
  overflow: hidden;
  background: #fff;
}
.carouselBox .ant-carousel .slick-slide .hotBox {
  width: 17%;
  float: left;
  margin-left: 2.5%;
}
.carouselBox .ant-carousel .slick-slide .hotBox img {
  width: 100%;
  // height: 200px;
}
.carouselBox .ant-carousel .custom-slick-arrow {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #000;
  // background-color: rgba(31, 61, 35, 0.11);
  opacity: 0.5;
}
.carouselBox .ant-carousel .custom-slick-arrow:before {
  display: none;
}
.carouselBox .ant-carousel .custom-slick-arrow:hover {
  opacity: 0.7;
}
</style>
